<template>
    <view class="">
		<view class="list" v-for="(item,index) in comments">
			<view class="top">
				<view class="left">
					<image :src="item.head_img"  ></image>
					<view class="name">{{item.name}}</view>
					<view class="star">
					<u-rate :count="count" v-model="value" active-color="#FFE145" size="20rpx" disabled="false"></u-rate>
					</view>
				</view>
				<view class="date">{{item.date}}</view>
			</view>
			<view class="bottom">
				<view class="detail">{{item.detail}}</view>
				<view class="price">
					<view class="num">消费：{{item.price}}元</view>
					</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				count: 5,
				value: 4,
			};
		},
		props: {
			comments: {
				type: Array,
				default: []
			},
			count: {
				type: Number,
				default: null
			},
			value: {
				type: Number,
				default: null
			},
		},
		mounted() {
		},
		methods: {
		}

	};
</script>

<style scoped lang="scss">
		.list {
			line-height: 24rpx;
			font-size: 24rpx;
			padding-top: 30rpx;
			.top {
				display: flex;
				justify-content: space-between;
				padding: 0 0 0 32rpx;
				.left {
					display: flex;
					position: relative;
					image {
						display: inline-block;
						width: 64rpx;
						height: 64rpx;
						border-radius: 32rpx;
						}
					.name {
						padding-left: 16rpx;
						font-weight: 600;
						color: #333;
						}
					.star {
						position: absolute;
						left: 75rpx;
						top: 35rpx;
					}

				}
				.date {
					color: #999;
					line-height: 20rpx;
					font-size: 20rpx;
					padding-right: 32rpx;
				}
			}
			.bottom {
				padding: 32rpx 0 32rpx 112rpx;
				.detail {
					color: #666;
				}
				.price {
					margin-top: 36rpx;
					width: 140rpx;
					height: 44rpx;
					background: #f4f4f4;
					border-radius: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.num {
						color: #333;
						font-size: 20rpx;
						line-height: 20rpx;
					}
				}
				
			}
		}
</style>